<template>
  <div class="main">
   <div class="container">

     <div class="title-container">
       欢 迎 校 友
     </div>

     <div class="label-container">
       校 园 新 闻
     </div>
     <el-carousel height="240px" :interval="2000" :autoplay="true">
       <el-carousel-item v-for="item in actList" :key="item.id">
         <img style="object-fit: fill ;" width="100%" height="100%":src="item.imgUrl">
       </el-carousel-item>
     </el-carousel>

     <div class="label-container"  style="background-color:rgb(230, 162, 60);">
       校 友 风 采
     </div>
     <div class="aluList-container">
       <div class="alu-item" v-for="alu in aluList" :key="alu.id">
         <img class="alu-item-img" style="object-fit: fill ;" width="100%" height="100%":src="alu.imgUrl">
         <div class="alu-item-info">
           <el-tag>{{alu.level}}</el-tag>
           <span>{{alu.name}}</span>
           <div style="padding:2px 0px 0px 10px;width: 100%;">性别：{{alu.gander}}</div>
         </div>

       </div>
     </div>

   </div>
  </div>

</template>

<script>
  export default {
    name: 'DashboardAlumni',
    data(){
      return{
        actList:[
          {
            id: 0,
            imgUrl:require('../_img/1.jpg')
          },
          {
            id: 1,
            imgUrl:require('../_img/2.jpg')
          },
          {
            id:2,
            imgUrl:require('../_img/3.jpg')
          }
        ],
        aluList:[
          {
            id: 0,
            imgUrl:require('../_img/alu_9.jpg'),
            name:'陈勤',
            gander:'男',
            level:'教师'
          },
          {
            id: 1,
            imgUrl:require('../_img/alu_11.jpg'),
            name:'吴文达',
            gander:'男',
            level:'技师'
          },
          {
            id:2,
            imgUrl:require('../_img/alu_10.jpg'),
            name:'海虹',
            gander:'女',
            level:'人事经理'
          },
          {
            id: 3,
            imgUrl:require('../_img/alu_4.jpg'),
            name:'李嘉诚',
            gander:'男',
            level:'副总裁'
          },
          {
            id: 4,
            imgUrl:require('../_img/alu_5.jpg'),
            name:'雅马哈',
            gander:'女',
            level:'销售经理'
          }, {
            id: 5,
            imgUrl:require('../_img/alu_6.jpg'),
            name:'大力原',
            gander:'男',
            level:'讲师'
          }, {
            id: 6,
            imgUrl:require('../_img/alu_7.jpg'),
            name:'左越新',
            gander:'男',
            level:'总经理'
          }, {
            id: 7,
            imgUrl:require('../_img/alu_8.jpg'),
            name:'郭富城',
            gander:'男',
            level:'架构师'
          },
          {
            id: 8,
            imgUrl:require('../_img/alu_wyf.jpg'),
            name:'吴亦凡',
            gander:'男',
            level:'副教授'
          },
        ]
      }
    },
    created() {
      console.log(this.h)
    }
  }
</script>

<style scoped lang="scss">
  .main{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .container{
    width: 100%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .title-container{
    width: 100%;
    text-align: center;
    background: #ffffff;
    margin-bottom: 10px;
    padding: 16px 16px 0;
    height: 50px;
    position: relative;
    color: #13ce66;
    border-radius: 4px;
  }

  .label-container{
    width: 100%;
    height: 25px;
    text-align: center;
    font-size: large;
    background-color:#409EFF;
    color: white ;
    padding: 2px;
    margin: 1px 0;
    border-radius: 4px;
  }

  .el-carousel{
    width: 100%;
    margin-bottom: 10px;
    border-radius: 4px;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

  .aluList-container{
    overflow: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 100px;
  }
  .alu-item{
    display: flex;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 5px 0;
    padding: 2px;
    border-radius: 10px;
    background-color: white;
    &-img{
      border-radius: 10px;
      height: 100px;
      width: 90px;
    }
    &-info {
      height: 100px;
      width: 60%;
      background-color: rgb(244, 244, 245);
      border-radius: 10px;
      padding: 5px 0 0 5%;
    }
    span{
      display: inline-block;
      margin: 5px;
    }
  }


</style>
